<template>
	<scroll-view scroll-y :scroll-top="scroll" class="group-list-scroll-view" :scroll-into-view="`anchor${currentIndex}`" @scroll="scrolltolower">
		<u-index-list :scrollTop="scrollTop" :sticky="false" :index-list="indexList"  @select="select">
			<view v-for="(item,key,index) in groupContactList" :key="key">
				<u-index-anchor :index="key" :id="'anchor'+key"
					v-if="keyword.length == 0||$utils.makePy(keyword)[0] == key" />
				<view class="group-item" v-for="group in groupContactList[key]" :key="group.sessionId"
					v-if="group.sessionName.indexOf(keyword) != -1" @click="$emit('toDetail',group)">
					<view class="group-avatar-container">
						<view class="session-avatar">
							{{group.sessionName.charAt(0)}}
						</view>
					</view>
					<view class="group-info-container">
						{{group.sessionName}}
					</view>
				</view>
			</view>
		</u-index-list>
	</scroll-view>
</template>

<script>
	export default {
		data() {
			return {
				scroll:0,
				scrollTop: 0,
				groupContactList: {},
				currentIndex:'',
				indexList:[],
			}
		},
		props: {
			groupSessionList: {
				type: Array,
			},
			keyword:{
				type:String,
			}
		},
		watch: {
			groupSessionList: {
				handler(val) {
					this.groupContactListInit();
				},
				immediate: false,
			}
		},
		mounted() {

		},
		onPageScroll(e) {},
		methods: {
			groupContactListInit() {
				this.groupSessionList.forEach(item => {
					const first_letter = this.$utils.makePy(item.sessionName)[0];
					if (!this.$utils.isLetter(first_letter)) {
						this.groupContactList['#'] ? this.groupContactList['#'].push(item) : this.groupContactList[
							'#'] = [
							item
						];
					} else {
						this.groupContactList[first_letter] ? this.groupContactList[first_letter].push(item) : this
							.groupContactList[first_letter] = [item];
					}
				})
				this.groupContactList = this.$utils.arrangementByalphabet(this.groupContactList)
				console.log('this.groupContactList>>>>>>>>>>>>>>', this.groupContactList)
				this.indexList = Object.keys(this.groupContactList)
				this.$nextTick(() => {
					this.scroll = 2;
				})
			},
			scrolltolower(e) {
				this.scrollTop = e.target.scrollTop;
			},
			select(e) {
				this.scroll = 2;
				this.currentIndex = e;
			},
		}
	}
</script>

<style scoped lang="scss">
	@import "./groupList.scss";
</style>
